import { h, defineComponent, ref } from "@vue/runtime-core";
import battleImg from "../../assets/battle.jpg";
import { game } from "../Game";
export default defineComponent({
	setup(props, ctx) {
		const mapHeight = game.screen.height
		const map1Y = ref(0);
		const map2Y = ref(-mapHeight);

		const speed = 5;
		game.ticker.add(() => {
			map1Y.value += speed;
			map2Y.value += speed;

			if (map1Y.value >= mapHeight) {
				map1Y.value = -mapHeight;
			}
			if (map2Y.value >= mapHeight) {
				map2Y.value = -mapHeight;
			}
		});
		return {
			map1Y,
			map2Y
		}
	},
	render(ctx) {
		return h("Container", [
			h("Sprite", { texture: battleImg, y: ctx.map1Y }),
			h("Sprite", { texture: battleImg, y: ctx.map2Y })
		])
	}
})